﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Racing_Word.aspx.cs" Inherits="ThangNM.Racing_Word" MasterPageFile="~/PublicInterface/Home_New.Master" %>
<%@ Register src="~/UserControl/Vote_Share_CommentUC.ascx" tagname="Vote_Share_CommentUC" tagprefix="uc11" %>
<%@ Register src="~/UserControl/AdsMainUC.ascx" tagname="AdsMainUC" tagprefix="uc2" %>

<asp:Content ID="cBody" ContentPlaceHolderID="cphBody" runat="server">
    <div class="row" style="margin:auto;">
        <ol class="breadcrumb breadcrumb_style" itemscope itemtype="http://schema.org/BreadcrumbList">
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                <a href="http://nguyenmanhthang.net" itemprop="item"><i class="fa fa-home"></i><span itemprop="name">Trang chủ</span></a>
                <meta itemprop="position" content="1" />
            </li>
            <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                <a href="http://nguyenmanhthang.net/giai-tri" itemprop="item"><span itemprop="name">Giải trí</span></a>
                <meta itemprop="position" content="2">
            </li>
            <li class="active">
                <asp:Literal id="lblsTitle1" runat="server" EnableViewState="false"></asp:Literal>
            </li>
        </ol>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="row title_style">
                <h1 class="font_18_ex"><asp:Literal ID="lblsTitle" runat="server" EnableViewState="false"></asp:Literal></h1>
            </div>
            <div class="row info_footer">
                <div class="col-md-6">
                    <i class="fa fa-clock-o"></i> <span><asp:Literal ID="lbltDateTimeCreate" runat="server" EnableViewState="false"></asp:Literal></span>&nbsp;&nbsp;&nbsp;
                    <asp:HyperLink ID="hplFK_iAccountID" runat="server" Target="_blank" rel="nofollow" EnableViewState="false"><i class="fa fa-user"></i><span> <asp:Literal ID="lblFK_iAccountID" runat="server" EnableViewState="false"></asp:Literal></span></asp:HyperLink>
                </div>
                <div class="col-md-6">
                    <i class="fa fa-eye"></i> <span><asp:Literal ID="lbliVisit" runat="server" EnableViewState="false"></asp:Literal> Lượt xem</span>&nbsp;&nbsp;&nbsp;
                    <i class="fa fa-heart"></i> <span><asp:Literal ID="lbliLike" runat="server" EnableViewState="false"></asp:Literal> Lượt thích</span>&nbsp;&nbsp;&nbsp;
                    <a href="#comment" rel="nofollow"><i class="fa fa-comment"></i><span> <asp:Literal ID="lbliComment" runat="server" EnableViewState="false"></asp:Literal>  Bình luận</span></a>
                </div>
            </div>
        </div>
        <div class="panel-body text_default">
            <div style="font-size:30px;text-align:center;font-weight:900;color:Red;"><i class="fa fa-hand-o-down fa-6"></i> Nhập tìm kiếm đáp án ở đây <i class="fa fa-hand-o-down fa-6"></i><br /></div>
            <div class="input-group" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnSearch')">
                <input id="txtKey" type="search" class="form-control" autocomplete="off" placeholder="Nhập link ảnh cần tìm vd: 'http://static.me.zing.vn/question/3.jpg' hoặc từ khóa vd: 'ao'." autofocus />
                <span class="input-group-btn"><input id="btnSearch" type="button" value="Tìm kiếm" class="btn btn-info" onclick="return btnSearch_onclick()" /></span>
            </div>
            <p><i>Chú ý: Tìm kiếm đáp án bằng link hình ảnh câu hỏi sẽ nhanh và chính xác nhất.</i></p><br /><br />
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-success">
                    <div class="panel-heading" role="tab" id="headingTwo">
                        <h3 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            <center style="color:darkgreen;font-size:18px">Click vào đây để xem<br /><i class="fa fa-hand-o-down fa-6"></i> Hướng dẫn tìm đáp án trò chơi "Giải mã đường đua - Zing me" <i class="fa fa-hand-o-down fa-6"></i></center>
                            </a>
                        </h3>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="panel-body">
                            <p>
                            <img src="http://nguyenmanhthang.net/images/NguyenManhThang.Net_GiaiTri_GiaiMaDuongDua_B1.png" class="img-responsive" alt="ThangNM hướng dẫn tìm đáp án giải mã đường đua - Bước 1" title="ThangNM hướng dẫn tìm đáp án giải mã đường đua - Bước 1" />
                            <center>
                            <h4>Bước 1: Chuột phải vào hình ảnh câu hỏi bên ZingMe chọn sao chép đường dẫn hình ảnh (Copy image URL)</h4>
                            </center>
                            </p><br /><br /><hr />
                            <p>
                            <img src="http://nguyenmanhthang.net/images/NguyenManhThang.Net_GiaiTri_GiaiMaDuongDua_B2.png" class="img-responsive" alt="ThangNM hướng dẫn tìm đáp án giải mã đường đua - Bước 2" title="ThangNM hướng dẫn tìm đáp án giải mã đường đua - Bước 2" />
                            <center>
                                <h4>Bước 2: Mở tab mới gõ địa chỉ <a href="http://nguyenmanhthang.net/giai-tri/giai-ma-duong-dua.html" title="Chia sẻ đáp án - Giải mã đường đua - Zing Me">http://nguyenmanhthang.net/giai-tri/giai-ma-duong-dua.html</a> Dán (Paste) đường link ảnh vừa copy vào ô tìm kiếm. Nếu tìm thấy đáp án thì quay trở lại ZingMe nhập đáp án rồi kiểm tra.</h4><br /><br /><hr />
                                <i>Chú ý: một bức ảnh có thể có nhiều đáp án khác nhau. Nếu như không tìm thấy đáp án bạn có thể comment hình ảnh số từ đáp án ở bên dưới để được giải đáp. Nếu như có đáp án nào không chính xác hoặc thiếu bạn hãy comment hoặc gửi mail về địa chỉ admin@nguyenmanhthang.net để chúng tôi sửa đổi và bổ sung thêm.</i><br /><br />
                                <h4 style="color:Green">Xin cảm ơn đã sử dụng website của chúng tôi, chúc bạn chơi game vui vẻ.</h4>
                                <a class="btn btn-danger btn-sm" data-toggle="collapse" data-target="#collapseTwo" href="#top" onclick="$('html,body').animate({scrollTop:0},'slow');return false;" title="OK, Chiến thôi. Click để ẩn hướng dẫn">OK, Chiến thôi. Click để ẩn hướng dẫn</a>
                            </center>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <br />
            <label id="lblMsg"></label>
            <div id="loadingmessage" style="display: none">
                <img src="http://va1en.sftcdn.net/shared/img/interface/loader_bar.gif" alt="please wait" />
            </div>
            <div id="TableCont" style="width: 100%;"></div><br /><br /><br />
            <uc2:AdsMainUC ID="AdsMainUC1" runat="server" EnableViewState="false" /><br />
        </div>
        <div class="panel-footer">
            <uc11:Vote_Share_CommentUC ID="Vote_Share_CommentUC1" runat="server" />
        </div>
    </div>
    <asp:HiddenField ID="hfAuto" runat="server" />
    <script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function CreateCustomersTable(result) {
            var str = '<table class="table table-striped table-bordered table-hover dataTable no-footer styleGrid" border="1px solid blue" cellpadding="6" cellspacing="4">';
            str += '<tr><th>Hình ảnh</th><th>Đáp án</th></tr>';
            for (var i = 0; i < result.length; i++) {
                str += '<tr><td align="center"><img style="width:200px;" src="' + result[i].sLinkImage + '" title="' + result[i].sTitle + '"/></td><td valign="miidle" align="center" style="color:green"><h3>' + result[i].sTitle + '</h3></td></tr>';
            }
            str += '</table>';
            var d = new Date();
            $('#lblMsg').html("<b>[ThangNM]</b> đã tìm thấy <b>" + result.length + "/501</b> kết quả phù hợp cho bạn (vào lúc <b>" + d.toISOString().replace('T', ' ').replace('Z', '') + "</b>).");
            $('#lblMsg').addClass("racing_word_msg_success");
            return str;
        }
        function btnSearch_onclick() {
            $("#loadingmessage").show();
            $("#TableCont").children().remove();
            $('#lblMsg').html(""); 
            $.ajax({
                type: "POST",
                url: "http://api.com:9562/API_Public.asmx/Racing_Word",
                data: "{'sQuery':'" + txtKey.value + "','sToken':'" + $("#cphBody_hfAuto").val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var mydata = eval(data);
                    var table = CreateCustomersTable(mydata.d);
                    $(table).appendTo("#TableCont");
                    $("#loadingmessage").hide();
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $('#lblMsg').html("Máy chủ đang nâng cấp, Xin vui lòng quay lại sau. Xin cảm ơn!<br> <i style='font-weight:normal'>(Bạn có thể để comment bên dưới với nội dung: hình ảnh và số lượng từ để được hỗ trợ tìm đáp án)</i>");
                    //$('#lblMsg').html("Error Occured!" + " | " + XMLHttpRequest + " | " + textStatus + " | " + errorThrown);
                    $('#lblMsg').addClass("racing_word_msg_error");
                    $("#loadingmessage").hide();
                }
            });
            txtKey.value = '';
            return false;
        }
    </script>
</asp:Content>
